<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script type="text/javascript" src="js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href="">订单管理</a>
				<a>
					<cite>订单列表</cite></a>
			</span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);"
       title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe9aa;</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="开始日" name="start" id="start">
            <input class="layui-input" placeholder="截止日" name="end" id="end">
            <div class="layui-input-inline">
                <select name="selectValue">
                    <option value="">支付状态</option>
                    <option value="1">已支付</option>
                    <option value="0">未支付</option>
                </select>
            </div>
            <input id="input_search" type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <!-- 表格 -->
    <table id="table_id" lay-filter="dev"></table>
    <!-- 分页 -->
    <div id="page_id"></div>

</div>
<!-- th工具栏 -->
<script type="text/html" id="th_toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <!-- <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe608;</i>添加</button> -->
    </div>
</script>
<!-- tr工具条 -->
<script type="text/html" id="tr_toolbar">
    <a class="a_status" title="完成支付" href="javascript:;" lay-event="change_status"><i class="layui-icon">&#xe62f;</i></a>
    <a class="a_edit" title="详情" onclick="" lay-event="edit"><i class="layui-icon">&#xe63c;</i></a>
    <a class="a_delete" title="删除" onclick="" href="javascript:;" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
</script>
<!-- 角色模板 -->
<script type="text/html" id="roleTpl">
    {{# if(d.adminPrivilege==1){ }}
    管理员
    {{# }else{ }}
    超级管理员
    {{# } }}
</script>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.orderPayStatus==1){ }}
    <span class="layui-btn layui-btn-normal layui-btn-mini">已支付</span></td>
    {{# }else{ }}
    <span class="layui-btn layui-btn-danger layui-btn-mini">未支付</span></td>
    {{# } }}
</script>
<!-- 消费额模板 -->
<script type="text/html" id="moneyTpl">
    ￥{{d.orderCost.toFixed(2)}}
</script>
<script>
    layui.use(['laydate', 'table', 'form'], function (laydate, table, form) {

        // 搜索监听
        form.on('submit(search)', function (data) {
            data = data.field
            // console.log(data)
            if (data.end!=='' && data.start >= data.end) {
                layer.msg('开始日期不能大于截止日期！')
                return false;
            }

            if (data.start !== '' || data.end !== '' || data.name !== '' || data.orderPayStatus!=='') {
                // layer.msg('传输数据了');
                // 表格重载
                tableIns.reload({
                    url: '/sell/orderSearch',
                    where: data,
                    page: {curr: 1}
                });
            } else if (data.start !== '' && data.end !== '' && data.name !== '') {
                location.reload()
                // layer.msg("都为空")
            }
            return false;
        })

        // 表格数据加载
        var tableIns = table.render({
            id: 'layui_table_id',
            elem: '#table_id',
            toolbar: '#th_toolbar',
            // toolbar:'default',
            defaultToolbar: ['filter', 'print'],
            // height: 320,
            url: '/sell/showAllOrder',
            // url:'./order.json',
            page: {
                elem: 'page_id',
                limit: 10,
                limits: [10, 20, 30]
            },
            initSort: {
                field: 'orderCreateTime',
                type: 'desc'
            },
            cols: [
                [{
                    type: 'checkbox'
                },
                    {
                        field: 'orderId',
                        title: 'ID'
                    },
                    {
                        field: 'userName',
                        title: '下单用户'
                    },
                    {
                        field: 'orderCost',
                        title: '消费额',
                        templet:'#moneyTpl'
                    },
                    {
                        field: 'orderDeskId',
                        title: '桌号',
                        // templet: '#roleTpl'
                    },
                    {
                        field: 'orderPeoples',
                        title: '用餐人数',
                        // sort: true
                    },
                    {
                        field: 'orderPayStatus',
                        title: '支付状态',
                        templet: '#statusTpl'
                    },
                    {
                        field: 'orderCreateTime',
                        title: '下单时间',
                        sort: true
                    },
                    {
                        title: '操作',
                        toolbar: '#tr_toolbar'
                    }
                ]
            ]
        });


        // 监听表头工具栏事件
        table.on('toolbar(dev)', function (obj) {
            // 选中行的数据
            var data = JSON.stringify(ids)
            switch (obj.event) {
                case 'delete': // 删除事件
                    // console.log(data)
                    // 异步删除
                    layer.confirm('确认要删除吗？', function () {
                        $.ajax({
                            url: '/sell/deleteMultiOrder',
                            type: 'delete',
                            contentType: 'application/json;charset=utf-8',
                            data: data,
                            success: function (res) {
                                if (res == 1) {
                                    layer.msg("删除成功");
                                    tableIns.reload({
                                        url: '/sell/showAllOrder',
                                        page:{
                                            curr:1
                                        }
                                    })
                                } else {
                                    layer.msg("删除失败，请重试！")
                                }
                            }
                        });
                    });
                    break;
            }
        })

        // 监听表格操作
        table.on('tool(dev)', function (obj) {
            // console.log(obj)
            var data = obj.data; // 获取当前行数据
            var layEvent = obj.event; // 获取lay-event对应的值
            var tr = obj.tr; // 获取当前行tr的DOM对象

            // 工具栏事件监听
            if (layEvent === 'change_status') {
                if(data.orderPayStatus==0){
                    // 改变用户状态
                    var a = tr.find('a.a_status')
                    layer.confirm('确认要更改吗？', function () {
                        //发异步把用户状态进行更改
                        $.ajax({
                            url: '/sell/changeOrderPayStatus',
                            type:'put',
                            data: {orderId: data.orderId},
                            success: function (res) {
                                if (res == 1) {
                                    if (data.orderPayStatus == 0) {
                                        // 原来是未支付状态
                                        a.parents("tr").find('span').removeClass('layui-btn-disabled').addClass('layui-btn-normal').html('已支付');
                                        layer.msg('完成支付!', {
                                            icon: 1,
                                            time: 1000
                                        });
                                    }
                                    // 表格重载
                                    tableIns.reload({
                                        url: '/sell/showAllOrder'
                                    })
                                } else {
                                    layer.msg("更改失败！请重试", {icon: 5});
                                }
                            }
                        });
                    });
                }

            } else if (layEvent === 'edit') {
                // 更新用户信息
                x_admin_show('订单详情', '/sell/orderDetail?orderId=' + data.orderId)
            } else if (layEvent === 'delete') {
                // 删除用户信息
                layer.confirm('确认要删除吗？', function () {
                    //发异步删除数据
                    $.ajax({
                        url: '/sell/deleteOneOrder',
                        data: {orderId: data.orderId},
                        type: 'delete',
                        success: function (res) {
                            if (res == 1) {
                                obj.del();
                                layer.msg('已删除!', {
                                    icon: 1,
                                    time: 1000
                                });
                            } else {
                                layer.msg('删除失败！请重试！')
                            }
                        }
                    });
                });
            }
        })

        var ids = new Array()

        // 监听复选框
        table.on('checkbox(dev)', function (obj) {

            ids=[]
            var checkStatus = table.checkStatus('layui_table_id');
            var objs=checkStatus.data
            // console.log(objs)
            for (var i=0,len=objs.length;i<len;i++){
                ids.push(objs[i].orderId)
            }


        })

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素

        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

    });

</script>

</body>

</html>
